<template>
  <div class="app-container">
    <Layout />
    <div class="main-container">
      <div class="papers">
        <h2>试卷中心</h2>
        <div class="paper" v-for="(item, index) in papers">
          <el-descriptions>
            <el-descriptions-item label="试卷id">{{
              item.paper.id
            }}</el-descriptions-item>
            <el-descriptions-item label="总分">{{
              item.paper.totalScore
            }}</el-descriptions-item>
            <el-descriptions-item label="难度">{{
              item.paper.totalDifficulty
            }}</el-descriptions-item>
            <el-descriptions-item label="知识覆盖率">
              {{ item.paper.knowledgeCoverage >1?1:item.paper.knowledgeCoverage }}
            </el-descriptions-item>
            <el-descriptions-item label="自动组卷">{{
              item.paper.isAuto
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label="开始考试">
            <a :href="'/do?id=' + item.paper.id">{{ "->点我" }}</a>
          </el-descriptions-item> -->
          </el-descriptions>
        </div>
      </div>

      <div class="exams">
        <h2>考试中心</h2>
        <div class="exam" v-for="(item, index) in exams">
          <el-descriptions>
            <el-descriptions-item label="状态">{{
              item.status==1 ? '已考完' : '没考完'
            }}</el-descriptions-item>
            <el-descriptions-item label="考试id">{{
              item.id
            }}</el-descriptions-item>
            <el-descriptions-item label="科目">{{
              item.subject
            }}</el-descriptions-item>
            <el-descriptions-item label="地点">{{
              item.location
            }}</el-descriptions-item>
            <el-descriptions-item label="时间">
              {{ new Date(item.date).toDateString() }}
            </el-descriptions-item>
            <el-descriptions-item v-if="item.status==0" label="开始考试"
              ><a :href="'/do?id=' + item.id + '&paperId=' + item.paperId">{{
                "-->点我"
              }}</a></el-descriptions-item
            >
            <el-descriptions-item v-else label="错题分析"
              ><a style="color: green;cursor: pointer;" @click="analysis(item)">{{
                "-->点我"
              }}</a></el-descriptions-item
            >
          </el-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Pagination from "@/components/Pagination";
import Layout from "@/layout";
import { autoGenerate, getAllPapers } from "@/api/autoGenerate";
import { getExams } from "@/api/exam";
// import examPaperApi from '@/api/examPaper'
// import subjectApi from '@/api/subject'

export default {
  components: { Pagination, Layout },
  data() {
    return {
      papers: [],
      exams: [],
    };
  },
  created() {
    this.getAllPapers();
    this.getExams();
  },
  methods: {
    getAllPapers() {
      let _this = this;
      getAllPapers()
        .then((re) => {
          console.log(re);
          if (re.success) {
            this.papers = re.data;
          } else {
            _this.$message.error(re.message);
          }
        })
        .catch((e) => {
          _this.$message.error(re.message);
        });
    },
    getExams() {
      let _this = this;
      console.log(getExams);
      getExams({ studentId: 1, current: 1, size: 100 })
        .then((re) => {
          console.log(re);
          if (re.records) {
            this.exams = (re.records || []).sort((a, b) => a.status - b.status);
          } else {
            _this.$message.error("出现未知错误");
          }
        })
        .catch((e) => {
          _this.$message.error("出现未知错误");
        });
    },
    initSubject() {
      let _this = this;
      // subjectApi.list().then(re => {
      //   _this.subjectList = re.response
      //   let subjectId = _this.subjectList[0].id
      //   _this.queryParam.subjectId = subjectId
      //   _this.tabId = subjectId.toString()
      //   _this.search()
      // })
    },
    search() {
      this.listLoading = true;
      // examPaperApi.pageList(this.queryParam).then(data => {
      //   const re = data.response
      //   this.tableData = re.list
      //   this.total = re.total
      //   this.queryParam.pageIndex = re.pageNum
      //   this.listLoading = false
      // })
    },
    analysis(item) {
      this.$router.push(`/exam-analysis?examId=${item.id}`);
    },
    paperTypeChange(val) {
      this.search();
    },
    subjectChange(tab, event) {
      this.queryParam.subjectId = Number(this.tabId);
      this.search();
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  // flex-direction: row-reverse;
  justify-content: center;
  // align-items: center;

  .papers {
    border-radius: 20px;
    position: relative;
    display: flex;
    // left: 50%;
    // margin-left: -250px;
    margin-top: 50px;
    width: 500px;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background-color: rgb(249, 249, 249);

    .paper {
      padding: 10px;
      border-radius: 20px;
    }
  }

  .exams {
    border-radius: 20px;
    position: relative;
    display: flex;
    // left: 50%;
    margin-left: 50px;
    margin-top: 50px;
    width: 500px;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    background-color: rgb(249, 249, 249);

    .exam {
      padding: 10px;
      border-radius: 20px;
    }
  }
}
</style>
